{% extends 'base.html' %}

{% block content %}
<style>
  .list_item {
        margin-top: 5px;
        padding: 5px;
      }
  a {
        text-decoration: none;
        color: black;
        font-size: 25px;
      }
</style>

    <div class="mt-4 text-center">
        <h2>
            Здесь будут отображаться избранные вами фрукты!
        </h2>
    </div>


    <div class="row row-cols-3 mt-3" >
    {% for item in liked %}
        <div class="col text-center p-2">
            <div class="card" style="border-radius: 20px;"> 
                <div class="card-body">
                    <a href="/food/item/?id={{ item.fruit.id }}" style="height: 400px; width: 400px;">
                    <img src="{{ item.fruit.image.url }}" height="375px" width="375px" class="img-responsive" style="border-radius: 0;" alt="...">
                  <p class="card-text pt-3">{{ item.fruit.name }}</p>
                 </a> 
                </div>
            
            </div>
        </div>

    {% endfor %}
    </div>

    <div class="mt-4 text-center">
        <h2>
            Ваше питание:
        </h2>
        </button>
    </div>


    <div class="col text-center p-2">
        <table class="table table-bordered border-dark">
            <tbody>
                <tr>
                  <th>
                      Завтрак
                      <div class="dropdown mt-2">
                          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                            Добавить
                          </button>
                          <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                            <li>
                                {% for item in liked %}
                                    <form method="POST">
                                        {% csrf_token %}

                                        <button type="submit" class="btn btn-primary mt-2"
                                                value="{{ item.fruit.id }}" name="breakfast"
                                                style="--bs-btn-padding-y: .20rem; --bs-btn-padding-x: .2rem; --bs-btn-font-size: .75rem;">
                                            + {{ item.fruit.name }}
                                        </button>

                                        <button type="submit" class="btn btn-primary mt-2"
                                                value="{{ item.fruit.id }}" name="breakfast_delete"
                                                style="--bs-btn-padding-y: .20rem; --bs-btn-padding-x: .2rem; --bs-btn-font-size: .75rem;">
                                            - {{ item.fruit.name }}
                                        </button>

                                    </form>
                                {% endfor %}
                            </li>
                          </ul>
                      </div>
                  </th>
                  <td>
                      {% for item in breakfast_food %}

                      <div class="text-center mt-2">
                          {{ item.breakfast.name }}
                      </div>

                      {% endfor %}
                  </td>
                </tr>
            </tbody>
            <tbody>
                <tr>
                  <th>
                      Обед

                      <div class="dropdown mt-2">
                          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
                            Добавить
                          </button>
                          <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                            <li>
                                {% for item in liked %}
                                    <form method="POST">
                                        {% csrf_token %}

                                        <button type="submit" class="btn btn-primary mt-2"
                                                value="{{ item.fruit.id }}" name="lunch"
                                                style="--bs-btn-padding-y: .20rem; --bs-btn-padding-x: .2rem; --bs-btn-font-size: .75rem;">
                                            + {{ item.fruit.name }}
                                        </button>

                                        <button type="submit" class="btn btn-primary mt-2"
                                                value="{{ item.fruit.id }}" name="lunch_delete"
                                                style="--bs-btn-padding-y: .20rem; --bs-btn-padding-x: .2rem; --bs-btn-font-size: .75rem;">
                                            - {{ item.fruit.name }}
                                        </button>
                                    </form>
                                {% endfor %}
                            </li>
                          </ul>
                      </div>
                  </th>

                  <td>

                      {% for item in lunch_food %}

                      <div class="text-center mt-2">
                          {{ item.lunch.name }}
                      </div>

                      {% endfor %}

                  </td>
                </tr>
            </tbody>
            <tbody>
                <tr>
                  <th>
                      Ужин

                      <div class="dropdown mt-2">
                          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-expanded="false">
                            Добавить
                          </button>
                          <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                            <li>
                                {% for item in liked %}
                                    <form method="POST">
                                        {% csrf_token %}

                                        <button type="submit" class="btn btn-primary mt-2"
                                                value="{{ item.fruit.id }}" name="dinner"
                                                style="--bs-btn-padding-y: .20rem; --bs-btn-padding-x: .2rem; --bs-btn-font-size: .75rem;">
                                            + {{ item.fruit.name }}
                                        </button>

                                        <button type="submit" class="btn btn-primary mt-2"
                                                value="{{ item.fruit.id }}" name="dinner_delete"
                                                style="--bs-btn-padding-y: .20rem; --bs-btn-padding-x: .2rem; --bs-btn-font-size: .75rem;">
                                            - {{ item.fruit.name }}
                                        </button>

                                    </form>
                                {% endfor %}
                            </li>
                          </ul>
                      </div>
                  </th>
                  <td>
                      {% for item in dinner_food %}

                      <div class="text-center mt-2">
                          {{ item.dinner.name }}
                      </div>

                      {% endfor %}
                  </td>
                </tr>
            </tbody>
        </table>
    </div>




{% endblock %}